<!DOCTYPE html>
<html lang="en">

<!-- Head tag -->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="A very lame cool person">
    <meta name="keyword" content="null">
    <meta name="theme-color" content="#600090">
    <meta name="msapplication-navbutton-color" content="#600090">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#600090">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="alternate" type="application/atom+xml" title="Guanghui" href="/atom.xml">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.css">
    <title>
        
        angular2-chapter10 -- DI｜Guanghui&#39;s blog
        
    </title>

    <link rel="canonical" href="https://wghglory.github.io/2017/05/05/angular2-chapter10/">

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/blog-style.css">

    <link rel="stylesheet" href="/css/my.css">

    <!-- Pygments Github CSS -->
    <link rel="stylesheet" href="/css/syntax.css">
</head>

<style>

    header.intro-header {
        background-image: url('/images/tag.jpg')
    }
</style>
<!-- hack iOS CSS :active style -->
<body ontouchstart="" class="animated fadeIn">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top " id="nav-top" data-ispost = "true" data-istags="false
" data-ishome = "false" >
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand animated pulse" href="/">
                <span class="brand-logo">
                    Guanghui
                </span>
                's Blog
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <!-- Known Issue, found by Hux:
            <nav>'s height woule be hold on by its content.
            so, when navbar scale out, the <nav> will cover tags.
            also mask any touch event of tags, unfortunately.
        -->
        <!-- /.navbar-collapse -->
        <div id="huxblog_navbar">
            <div class="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/">Home</a>
                    </li>
					
                    
                        
							
                        <li>
                            <a href="/tags/">tags</a>
                        </li>
							
						
                    
                        
							
                        <li>
                            <a href="/works/">my works</a>
                        </li>
							
						
                    

					
                        <li>
                            <a href="https://wghglory.github.io/guanghui.resume/" target="_blank">Resume</a>
                        </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- /.container -->
</nav>
<script>
    // Drop Bootstarp low-performance Navbar
    // Use customize navbar with high-quality material design animation
    // in high-perf jank-free CSS3 implementation
//    var $body   = document.body;
    var $toggle = document.querySelector('.navbar-toggle');
    var $navbar = document.querySelector('#huxblog_navbar');
    var $collapse = document.querySelector('.navbar-collapse');

    $toggle.addEventListener('click', handleMagic)
    function handleMagic(e){
        if ($navbar.className.indexOf('in') > 0) {
        // CLOSE
            $navbar.className = " ";
            // wait until animation end.
            setTimeout(function(){
                // prevent frequently toggle
                if($navbar.className.indexOf('in') < 0) {
                    $collapse.style.height = "0px"
                }
            },400)
        }else{
        // OPEN
            $collapse.style.height = "auto"
            $navbar.className += " in";
        }
    }
</script>

<!-- Main Content -->

<!--only post-->


<img class="wechat-title-img" src="/images/default-post.jpg">


<style>
    
    header.intro-header {
        background-image: url('/images/default-post.jpg');
    }

    
</style>

<header class="intro-header">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 text-center">
                <div class="post-heading">
                    <h1>angular2-chapter10 -- DI</h1>
                    
                    <span class="meta">
                         作者 Guanghui Wang
                        <span>
                          日期 2017-05-05
                         </span>
                    </span>
                    <div class="tags text-center">
                        
                        <a class="tag" href="/tags/#Angular2"
                           title="Angular2">Angular2</a>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="post-title-haojen">
        <span>
            <!-- angular2-chapter10 -- DI -->
        </span>
    </div>
</header>

<!-- Post Content -->
<article>
    <div class="container">
        <div class="row">
            <!-- Post Container -->
            <div class="col-lg-8 col-lg-offset-1 col-sm-9 post-container">
                <h1 id="How-angular-2-do-DI"><a href="#How-angular-2-do-DI" class="headerlink" title="How angular 2 do DI"></a>How angular 2 do DI</h1><p>Check code at: <a href="https://github.com/wghglory/angular2-fundamental" target="_blank" rel="noopener">https://github.com/wghglory/angular2-fundamental</a></p>
<p>when calling eventService, angular2 uses EventService class as key to do DI, it creates an instance of EventService, and assign it to eventService. (angular1 uses string as key to do DI)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">CreateEventComponent</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(private eventService: EventService) &#123; &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="Using-Third-Party-Global-Services-The-Problem"><a href="#Using-Third-Party-Global-Services-The-Problem" class="headerlink" title="Using Third Party Global Services - The Problem"></a>Using Third Party Global Services - The Problem</h3><ul>
<li>Now when we edit profile, change lastname or firstname, save, there is no any user-friendly popup. We want our toastr to do this job.</li>
<li>Our toastr service uses global variable <code>declare let toastr: any</code>, it comes from the index.html <code>&lt;script src=&quot;node_modules/toastr/build/toastr.min.js&quot;&gt;&lt;/script&gt;</code></li>
<li>We want a way that avoiding using global variable, and we don’t want to create a toastrService to wrap up all its apis. jQuery has too many apis, we cannot wrap all apis.</li>
</ul>
<h3 id="Using-OpaqueToken-for-DI"><a href="#Using-OpaqueToken-for-DI" class="headerlink" title="Using OpaqueToken for DI"></a>Using OpaqueToken for DI</h3><p>1) Update common/toastr.service.ts</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// import &#123; Injectable &#125; from '@angular/core'</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">// //I guess this local variable was assigned the global toastr variable</span></span><br><span class="line"><span class="comment">// declare let toastr: any</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">// @Injectable()</span></span><br><span class="line"><span class="comment">// export class ToastrService &#123;</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">//     success(message: string, title?: string) &#123;</span></span><br><span class="line"><span class="comment">//         toastr.success(message, title);</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">//     info(message: string, title?: string) &#123;</span></span><br><span class="line"><span class="comment">//         toastr.info(message, title);</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">//     error(message: string, title?: string) &#123;</span></span><br><span class="line"><span class="comment">//         toastr.error(message, title);</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">//     warning(message: string, title?: string) &#123;</span></span><br><span class="line"><span class="comment">//         toastr.warning(message, title);</span></span><br><span class="line"><span class="comment">//     &#125;</span></span><br><span class="line"><span class="comment">//</span></span><br><span class="line"><span class="comment">// &#125;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> &#123; OpaqueToken &#125; <span class="keyword">from</span> <span class="string">'@angular/core'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">let</span> TOASTR_TOKEN = <span class="keyword">new</span> OpaqueToken(<span class="string">'toastr'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//not necessary if api is large, just for intellisense</span></span><br><span class="line"><span class="keyword">export</span> interface Toastr &#123;</span><br><span class="line">    success(message: string, title?: string): <span class="keyword">void</span>;</span><br><span class="line">    info(message: string, title?: string): <span class="keyword">void</span>;</span><br><span class="line">    error(message: string, title?: string): <span class="keyword">void</span>;</span><br><span class="line">    warning(message: string, title?: string): <span class="keyword">void</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>2) Register it in app.module.ts</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// import &#123; ToastrService &#125; from './common/toastr.service'</span></span><br><span class="line">+ <span class="keyword">import</span> &#123; TOASTR_TOKEN, Toastr &#125; <span class="keyword">from</span> <span class="string">'./common/toastr.service'</span></span><br><span class="line">+ declare <span class="keyword">let</span> toastr: Toastr</span><br><span class="line"></span><br><span class="line">@NgModule(&#123;</span><br><span class="line">    imports: [...],</span><br><span class="line">    declarations: [...],</span><br><span class="line">    providers: [</span><br><span class="line">        EventService,</span><br><span class="line">        <span class="comment">// ToastrService,</span></span><br><span class="line">+        &#123; <span class="attr">provide</span>: TOASTR_TOKEN, <span class="attr">useValue</span>: toastr &#125;,</span><br><span class="line">        EventRouteActivator,</span><br><span class="line">        &#123;</span><br><span class="line">            provide: <span class="string">'canDeactivateCreateEvent'</span>,</span><br><span class="line">            useValue: checkDirtyState</span><br><span class="line">        &#125;,</span><br><span class="line">        EventListResolver,</span><br><span class="line">        AuthService</span><br><span class="line">    ],</span><br><span class="line">    bootstrap: [AppComponent]</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">AppModule</span> </span>&#123; &#125;</span><br></pre></td></tr></table></figure>
<p>3) Remove all old ToastService in events-list component</p>
<h3 id="Using-the-Inject-Decorator"><a href="#Using-the-Inject-Decorator" class="headerlink" title="Using the @Inject Decorator"></a>Using the @Inject Decorator</h3><p>profile.component.ts:</p>
<p>1) import Inject, TOASTR_TOKEN, Toastr.<br>2) @Inject(TOASTR_TOKEN) private toastr: Toastr, @Inject is angular DI, Toastr is typescript intellisense (not required)<br>3) use the service: <code>this.toastr.success(&#39;Profile saved successfully!&#39;)</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br></pre></td><td class="code"><pre><span class="line">+ <span class="keyword">import</span> &#123; Component, OnInit, Inject &#125; <span class="keyword">from</span> <span class="string">'@angular/core'</span></span><br><span class="line"><span class="keyword">import</span> &#123; FormControl, FormGroup, Validators &#125; <span class="keyword">from</span> <span class="string">'@angular/forms'</span></span><br><span class="line"><span class="keyword">import</span> &#123; AuthService &#125; <span class="keyword">from</span> <span class="string">'./auth.service'</span></span><br><span class="line"><span class="keyword">import</span> &#123; Router &#125; <span class="keyword">from</span> <span class="string">'@angular/router'</span></span><br><span class="line"></span><br><span class="line">+ <span class="keyword">import</span> &#123; TOASTR_TOKEN, Toastr &#125; <span class="keyword">from</span> <span class="string">'../common/toastr.service'</span></span><br><span class="line"></span><br><span class="line">@Component(&#123;</span><br><span class="line">    templateUrl: <span class="string">'app/user/profile.component.html'</span>,</span><br><span class="line">    styles: [</span><br><span class="line">        <span class="string">`</span></span><br><span class="line"><span class="string">        em &#123;float:right;color:#e05c65;padding-left:10px;&#125;</span></span><br><span class="line"><span class="string">        .error input&#123;background-color:#e3c3c5;&#125;</span></span><br><span class="line"><span class="string">        .error ::-webkit-input-placeholder &#123;color:#999;&#125;</span></span><br><span class="line"><span class="string">        .error ::-moz-placeholder &#123;color:#999;&#125;</span></span><br><span class="line"><span class="string">        .error :-ms-input-placeholder &#123;color:#999;&#125;</span></span><br><span class="line"><span class="string">        `</span></span><br><span class="line">    ]</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">export</span> <span class="class"><span class="keyword">class</span> <span class="title">ProfileComponent</span> <span class="title">implements</span> <span class="title">OnInit</span> </span>&#123;</span><br><span class="line">+    <span class="keyword">constructor</span>(private authService: AuthService, private router: Router, @Inject(TOASTR_TOKEN) private toastr: Toastr) &#123; &#125;</span><br><span class="line"></span><br><span class="line">    profileForm: FormGroup</span><br><span class="line">    private firstName: FormControl</span><br><span class="line">    private lastName: FormControl</span><br><span class="line"></span><br><span class="line">    ngOnInit() &#123;</span><br><span class="line">        <span class="keyword">this</span>.firstName = <span class="keyword">new</span> FormControl(<span class="keyword">this</span>.authService.currentUser.firstName, [Validators.required, Validators.pattern(<span class="string">'[a-zA-Z].*'</span>)])</span><br><span class="line">        <span class="keyword">this</span>.lastName = <span class="keyword">new</span> FormControl(<span class="keyword">this</span>.authService.currentUser.lastName, Validators.required)</span><br><span class="line"></span><br><span class="line">        <span class="keyword">this</span>.profileForm = <span class="keyword">new</span> FormGroup(&#123;</span><br><span class="line">            firstName: <span class="keyword">this</span>.firstName,</span><br><span class="line">            lastName: <span class="keyword">this</span>.lastName</span><br><span class="line">        &#125;)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    cancel() &#123;</span><br><span class="line">        <span class="keyword">this</span>.router.navigate([<span class="string">'events'</span>])</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    saveProfile(formValues) &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">this</span>.profileForm.valid) &#123;</span><br><span class="line">            <span class="keyword">this</span>.authService.updateCurrentUser(formValues.firstName, formValues.lastName)</span><br><span class="line">    +        <span class="keyword">this</span>.toastr.success(<span class="string">'Profile saved successfully!'</span>)</span><br><span class="line">    -        <span class="comment">// this.router.navigate(['events'])</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    validateFirstName() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.firstName.valid || <span class="keyword">this</span>.firstName.untouched</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    validateLastName() &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span>.lastName.valid || <span class="keyword">this</span>.lastName.untouched</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="The-useClass-Provider"><a href="#The-useClass-Provider" class="headerlink" title="The useClass Provider"></a>The useClass Provider</h3><p>in app.module.ts:</p>
<p>Someday we might use <code>{ provide: logger, useClass: fileLogger }</code></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">providers: [</span><br><span class="line">    EventService,</span><br><span class="line">    <span class="comment">// ToastrService,</span></span><br><span class="line">    &#123; <span class="attr">provide</span>: TOASTR_TOKEN, <span class="attr">useValue</span>: toastr &#125;,</span><br><span class="line">    EventRouteActivator, <span class="comment">//short hand of &#123; provide: EventRouteActivator, useClass: EventRouteActivator &#125;,</span></span><br><span class="line">    &#123;</span><br><span class="line">        provide: <span class="string">'canDeactivateCreateEvent'</span>,</span><br><span class="line">        useValue: checkDirtyState</span><br><span class="line">    &#125;,</span><br><span class="line">    EventListResolver,</span><br><span class="line">    AuthService</span><br><span class="line">],</span><br></pre></td></tr></table></figure>
<h3 id="The-useExisting-and-useFactory-Providers-rarely-use"><a href="#The-useExisting-and-useFactory-Providers-rarely-use" class="headerlink" title="The useExisting and useFactory Providers (rarely use)"></a>The useExisting and useFactory Providers (rarely use)</h3><p>You use Logger service. It’s a big api which contains 30 methods, but you are going to use only 5 common methods</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">providers: [</span><br><span class="line">    &#123; <span class="attr">provide</span>: MinimalLogger, <span class="attr">useExisting</span>: Logger &#125;,</span><br><span class="line">    &#123; <span class="attr">provide</span>: MinimalLogger, <span class="attr">useFactory</span>: Logger &#125;,</span><br><span class="line">],</span><br></pre></td></tr></table></figure>

                <!-- <hr> -->
                

                <ul class="pager">
                    
                    <li class="previous">
                        <a href="/2017/05/04/angular2-chapter09/" data-toggle="tooltip" data-placement="top"
                           title="angular2-chapter09 -- Displaying Data with Pipes">&larr; Previous Post</a>
                    </li>
                    
                    
                    <li class="next">
                        <a href="/2017/05/09/angular2-chapter11/" data-toggle="tooltip" data-placement="top"
                           title="angular2-chapter11 -- Create Directives and Advanced Component">Next Post &rarr;</a>
                    </li>
                    
                </ul>

                <!-- social-share start -->
                <div class="social-share" style="padding-top:20px;text-align:center;"></div>
                <!--  css & js -->
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css
                ">
                <script src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js"></script>
                <!-- social-share end -->


                

                
                <!-- disqus 评论框 start -->
                <div class="comment">
                    <div id="disqus_thread" class="disqus-thread"></div>
                </div>
                <!-- disqus 评论框 end -->
                

            </div>

            <div class="hidden-xs col-sm-3 toc-col">
                <div class="toc-wrap">
                    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#How-angular-2-do-DI"><span class="toc-text">How angular 2 do DI</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#Using-Third-Party-Global-Services-The-Problem"><span class="toc-text">Using Third Party Global Services - The Problem</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Using-OpaqueToken-for-DI"><span class="toc-text">Using OpaqueToken for DI</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Using-the-Inject-Decorator"><span class="toc-text">Using the @Inject Decorator</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#The-useClass-Provider"><span class="toc-text">The useClass Provider</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#The-useExisting-and-useFactory-Providers-rarely-use"><span class="toc-text">The useExisting and useFactory Providers (rarely use)</span></a></li></ol></li></ol></li></ol>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- Sidebar Container -->

            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                sidebar-container">

                <!-- Featured Tags -->
                
                <section>
                    <!-- no hr -->
                    <h5 class="text-center">
                        <a href="/tags/">FEATURED TAGS</a>
                    </h5>
                    <div class="tags">
                        
                        <a class="tag" href="/tags/#Angular2"
                           title="Angular2">Angular2</a>
                        
                    </div>
                </section>
                

                <!-- Friends Blog -->
                
            </div>
        </div>

    </div>
</article>

<div id="music">
    <audio id="bell" src="/music/Faded.mp3" preload="auto" loop autoplay></audio>
</div>
<!-- <embed style="position:fixed;right:0;bottom:0;"; src="http://www.xiami.com/widget/274513503_1776204257/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed> -->
<!-- <embed style="position:fixed;right:0;bottom:-44px;"; src="http://www.xiami.com/widget/274513503_1775988866,1774426379,1770760772,1772121439,3567313,_235_246_FF8719_494949/multiPlayer.swf" allowscriptaccess="always" quality="high" wmode="opaque" menu="false" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="235" height="246" title="Adobe Flash Player"> -->
<!-- music control -->
<script src="/js/music.js"></script>

<div class="gotoTop"></div>
<script src="/js/gotoTop.js"></script>



<!-- disqus 公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = "guanghuiwang";
    var disqus_identifier = "https://wghglory.github.io/2017/05/05/angular2-chapter10/";
    var disqus_url = "https://wghglory.github.io/2017/05/05/angular2-chapter10/";

    (function () {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<!-- disqus 公共JS代码 end -->



<!-- Footer -->
<!-- Footer -->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1 text-center">
                <br>
                <ul class="list-inline text-center">
                
                
                

                

                
                <li>
                    <a target="_blank" href="https://www.jianshu.com/u/85d2cacc9fcd">
                                <span class="fa-stack fa-lg">
                                    <i class="fa fa-circle fa-stack-2x"></i>
                                    <i class="fa fa-stack-1x fa-inverse">简</i>
                                </span>
                    </a>
                </li>
                

                
                    <li>
                        <a target="_blank" href="https://www.facebook.com/wghglory">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                

                
                    <li>
                        <a target="_blank"  href="https://github.com/wghglory">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                

                
                    <li>
                        <a target="_blank"  href="https://www.linkedin.com/in/guanghuiwang">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
                

                </ul>
                <p class="copyright text-muted">
                    Copyright &copy; Guanghui 2017
                    <br>
                    <span id="busuanzi_container_site_pv" style="font-size: 12px;">PV: <span id="busuanzi_value_site_pv"></span> Times</span>
                    <br>
                    Modified theme based on <a href="https://haojen.github.io/">Haojen Ma</a>' Anisina
                </p>

            </div>
        </div>
    </div>
</footer>

<!-- jQuery -->
<script src="/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="/js/bootstrap.min.js"></script>

<!-- Custom Theme JavaScript -->
<script src="/js/blog.js"></script>

<!-- code block fold/unfold button and copy button -->
<script src="/js/codeBlockEnhance.js"></script>

<!-- async load function -->
<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>

<!-- jquery.tagcloud.js -->
<script>
    // only load tagcloud.js in tag.html
    if($('#tag_cloud').length !== 0){
        async("https://wghglory.github.io/js/jquery.tagcloud.js",function(){
            $.fn.tagcloud.defaults = {
                //size: {start: 1, end: 1, unit: 'em'},
                color: {start: '#bbbbee', end: '#0085a1'},
            };
            $('#tag_cloud a').tagcloud();
        })
    }
</script>

<!--fastClick.js -->
<script>
    async("//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js", function(){
        var $nav = document.querySelector("nav");
        if($nav) FastClick.attach($nav);
    })
</script>

<!-- Google Analytics -->


<script>
    // dynamic User by Hux
    var _gaId = 'UA-91771069-1';
    var _gaDomain = 'wghglory.github.io';
    // Originial
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', _gaId, _gaDomain);
    ga('send', 'pageview');
</script>


<!-- Baidu Tongji -->


<!-- swiftype -->
<script type="text/javascript">
  // (function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
  // (w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
  // e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
  // })(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
  //
  // _st('install','undefined','2.0.0');
</script>

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

<!--wechat title img-->
<img class="wechat-title-img" src="/images/avatar.jpg">
</body>

</html>
